<template>
  <view class="wrap">
    <u-collapse :head-style="headStyle">
      <u-collapse-item
        :title="'用户   ' + item.username"
        v-for="(item, index) in list"
        :key="index"
      >
        <view>
          <text>用户ID</text>
          <text>{{ item.id }}</text>
        </view>
        <view>
          <text>用户头像</text>
          <image :src="item.avatarUrl" style="width: 70rpx; height: 70rpx" />
        </view>
        <view>
          <text>用户名</text>
          <text>{{ item.username }}</text>
        </view>
        <view>
          <text>用户昵称</text>
          <text>{{ item.nickname }}</text>
        </view>
        <view>
          <text>用户电话</text>
          <text>{{ item.phone }}</text>
        </view>
        <view>
          <text>用户邮箱</text>
          <text>{{ item.email }}</text>
        </view>
        <view>
          <text>角色</text>
          <text>{{ item.roleName }}</text>
        </view>
        <view>
          <u-button type="warning" @click="showSelectRole(item.id)"
            >修改用户角色</u-button
          >
          <u-button type="error" @click="showDeleteUser(item.id)"
            >删除用户</u-button
          >
        </view>
      </u-collapse-item>
    </u-collapse>
    <u-select
      v-model="updateRoleShow"
      mode="single-column"
      :list="roleList"
      @confirm="updateRole"
    ></u-select>
    <!-- 显示是否删除对话框 -->
    <u-popup v-model="deleteUsershow" mode="top">
      <view>
        <text>是否删除？</text>
        <view class="btn">
          <u-button type="primary" plain @click="deleteUser">是</u-button>
        </view>
        <view class="btn">
          <u-button type="error" plain @click="deleteUsershow = false"
            >否</u-button
          >
        </view>
      </view>
    </u-popup>
    <!-- 显示toast提示 -->
    <u-toast ref="userToastRef" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      // 控制折叠菜单标题样式
      headStyle: {
        fontWeight: "800",
        fontSize: "30rpx",
        height: "100rpx",
      },
      // 控制选择框的显示
      updateRoleShow: false,
      deleteUsershow: false,
      roleList: [
        {
          label: "普通球员",
          value: 1,
        },
        {
          label: "教练",
          value: 2,
        },
        {
          label: "管理员",
          value: 3,
        },
      ],
      // 保存相对应的用户id
      userid: "",
    };
  },
  methods: {
    // 获取所有用户信息
    async getAllUser() {
      const { data } = await this.$request({
        url: "/user/",
      });
      // 清空数组
      this.list = [];
      data.forEach((item) => {
        let obj = {};
        obj.id = item.id;
        obj.username = item.username;
        obj.nickname = item.nickname;
        obj.avatarUrl = item.avatar;
        obj.phone = item.phone;
        obj.email = item.email;
        obj.roleId = item.roles[0].id;
        obj.roleName = item.roles[0].nameZh;
        this.list.push(obj);
      });
    },

    // 显示选择组件
    showSelectRole(id) {
      this.updateRoleShow = true;
      this.userid = id;
    },

    // 修改用户角色
    async updateRole(e) {
      let rid = e[0].value;
      this.updateRoleById(rid);
    },

    // 修改用户角色
    async updateRoleById(rid) {
      const { data } = await this.$request({
        url: "/user/roles",
        method: "put",
        data: {
          id: this.userid,
          rid,
        },
      });
      if (data.code === 200) {
        uni.redirectTo({
          url: "/pages/user/userInfo/index",
        });
      } else {
        return uni.$refs.userToastRef.show({
          title: data.message,
          type: "error",
        });
      }
    },

    // 删除
    showDeleteUser(id) {
      this.userid = id;
      this.deleteUsershow = true;
    },

    async deleteUser() {
      const { data } = await this.$request({
        url: `/user/${this.userid}`,
        method: "delete",
      });
      if (data.code === 200) {
        this.deleteUsershow = false;
        uni.redirectTo({
          url: "/pages/user/userInfo/index",
        });
      } else {
        return this.$refs.userToastRef.show({
          title: data.message,
          type: "error",
        });
      }
    },
  },
  onLoad() {
    this.getAllUser();
  },
};
</script>

<style scoped lang="scss">
.wrap {
  height: 100vh;
  width: 100vw;
  padding: 15rpx 30rpx;

  u-collapse {
    view {
      padding: 5rpx 10rpx;
      height: 100rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #000;
      margin-bottom: 15rpx;
      border-radius: 2rpx;
    }
  }

  u-popup {
    view {
      padding: 10rpx 30rpx;

      text {
        font-weight: 800;
        font-size: 35rpx;
        margin-bottom: 20rpx;
      }

      .btn {
        margin: 5rpx auto 0 auto;
        height: 100rpx;
        width: 50%;
      }
    }
  }
}


</style>